<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
<title>Markdown For Typora - Huanghs blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=1">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png?v=1">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png?v=1">
  <link rel="manifest" href="/favicon/site.webmanifest?v=1">
  
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v=1" color="#ffffff">
    <link rel="shortcut icon" href="/favicon/favicon.ico?v=1">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml?v=1">
  
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">

<meta name="generator" content="Hugo 0.66.0" /><meta itemprop="name" content="Markdown For Typora">
<meta itemprop="description" content="A sample article that shows the basic markup syntax and formatting of HTML elements.">
<meta itemprop="datePublished" content="2020-03-12T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2020-03-12T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="1958">
<meta itemprop="image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg">



<meta itemprop="keywords" content="markdown,typora," /><meta property="og:title" content="Markdown For Typora" />
<meta property="og:description" content="A sample article that shows the basic markup syntax and formatting of HTML elements." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://hhs44.github.io/en/blog/markdown-reference-/" />
<meta property="og:image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" />
<meta property="article:published_time" content="2020-03-12T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-03-12T00:00:00+00:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg"/>

<meta name="twitter:title" content="Markdown For Typora"/>
<meta name="twitter:description" content="A sample article that shows the basic markup syntax and formatting of HTML elements."/>
<meta name="twitter:site" content="@example"/>
<link rel="stylesheet" href="/css/bundle.min.b2b2abee095149a60c0a1a2c4fab4b7c140b32ca88abc3d2f83d0dd903b6f634.css" integrity="sha256-srKr7glRSaYMChosT6tLfBQLMsqIq8PS&#43;D0N2QO29jQ=">
        <link rel="stylesheet" href="/css/add-on.css">

</head>

  <body>
    
<header id="site-header">
  <nav id="site-nav">
    <h1 class="nav-title">
      <a href="/en/">
        
          
            Blog
          
        
      </a>
    </h1>
    <menu id="site-nav-menu" class="flyout-menu">
      
        
          
          
            <a href="/en/" class="link"><i class='fa fa-home'></i> 首页</a>
          
        
      
        
          
          
            <a href="/en/blog/" class="link"><i class='far fa-newspaper'></i> 博客</a>
          
        
      
        
          
          
            <a href="/en/categories/" class="link"><i class='fas fa-sitemap'></i> 分类</a>
          
        
      
        
          
          
            <a href="/en/tags/" class="link"><i class='far fa-envelope'></i> 标签</a>
          
        
      
        
          
          
            <a href="/en/about/" class="link"><i class='far fa-id-card'></i> 关于</a>
          
        
      
      <a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt">&nbsp;</i>Share</a>
      

    </menu>
    

    <a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt fa-2x">&nbsp;</i></a>
    <a href="#lang-menu" class="lang-toggle" lang="en">en</a>
    <a href="#site-nav" class="nav-toggle"><i class="fas fa-bars fa-2x"></i></a>
  </nav>
  <menu id="lang-menu" class="flyout-menu">
  <a href="#" lang="en" class="link active">English (en)</a>
  
      <a href="https://hhs44.github.io/blog/markdown-reference-/" lang="zh-cn" class="link">中文 (zh-cn)</a>
    
  
</menu>

  
    <menu id="share-menu" class="flyout-menu">
      <h1>Share Post</h1>
      





    </menu>
  
</header>


    <div id="wrapper">
      <section id="site-intro">
  <a href="/en/"><img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/head.jpg" class="circle" width="" alt="huang`s blog " /></a>
  <header>
    <h1>Huanghs的个人博客 </h1>
  </header>
  <main>
    <p>不写下一些东西，就没法证明自己<br> 不多走一些路，就没法看到更多的风景</p>
  </main>
  
    <footer>
      <ul class="socnet-icons">
        

        <li><a href="//github.com/hhs44/hhs44.github.io" target="_blank" rel="noopener" title="GitHub" class="fab fa-github"></a></li>






<li><a href="//flickr.com/photos/example" target="_blank" rel="noopener" title="Flickr" class="fab fa-flickr"></a></li>




<li><a href="//linkedin.com/in/example" target="_blank" rel="noopener" title="LinkedIn" class="fab fa-linkedin"></a></li>
<li><a href="//linkedin.com/company/examplebusiness" target="_blank" rel="noopener" title="LinkedIn Company" class="fab fa-linkedin"></a></li>



<li><a href="//facebook.com/example" target="_blank" rel="noopener" title="Facebook" class="fab fa-facebook"></a></li>
<li><a href="//reddit.com/user/example" target="_blank" rel="noopener" title="Reddit" class="fab fa-reddit"></a></li>





<li><a href="weixin://contacts/profile/22" target="_blank" rel="noopener" title="WeChat" class="fab fa-weixin"></a></li>
<li><a href="//wpa.qq.com/msgrd?v=3&amp;uin=1159986871&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener" title="QQ" class="fab fa-qq"></a></li>
<li><a href="//instagram.com/example" target="_blank" rel="noopener" title="Instagram" class="fab fa-instagram"></a></li>

<li><a href="//twitter.com/example" target="_blank" rel="noopener" title="Twitter" class="fab fa-twitter"></a></li>


<li><a href="//pinterest.com/example" target="_blank" rel="noopener" title="Pinterest" class="fab fa-pinterest-p"></a></li>
<li><a href="//telegram.me/example" target="_blank" rel="noopener" title="telegram" class="fab fa-telegram"></a></li>



<li><a href="//researchgate.net/profile/example" target="_blank" rel="noopener" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>
<li><a href="//keybase.io/example" target="_blank" rel="noopener" title="keybase" class="fab fa-keybase"></a></li>
<li><a href="//example.com/@example" target="_blank" rel="noopener" title="mastodon" class="fab fa-mastodon"></a></li>
<li><a href="mailto:1159986871@qq.com" target="_blank" title="Email" class="far fa-envelope"></a></li>

      </ul>
    </footer>
  
</section>


      <main id="site-main">
        <article class="post">
  <header>
  <div class="title">
    
        <h2><a href="/en/blog/markdown-reference-/">Markdown For Typora</a></h2>
    
    
        <p>A sample article that shows the basic markup syntax and formatting of HTML elements.</p>
    
</div>
  <div class="meta">
    <time class="published" datetime="2020-03-12 00:00:00 &#43;0000 UTC">
      March 12, 2020
    </time>
    <span class="author">Huanghs</span>
    
      <p>10 minutes read</p>
    
  </div>
</header>

  <section id="socnet-share">
    





  </section>
  
  <a href="/en/blog/markdown-reference-/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


  <div class="content">
    <h1 id="markdown-for-typora">Markdown For Typora</h1>
<h2 id="overview">Overview</h2>
<p><strong>Markdown</strong> is created by <a href="http://daringfireball.net/">Daring Fireball</a>; the original guideline is <a href="http://daringfireball.net/projects/markdown/syntax">here</a>. Its syntax, however, varies between different parsers or editors. <strong>Typora</strong> is using <a href="https://help.github.com/articles/github-flavored-markdown/">GitHub Flavored Markdown</a>.</p>
<p>[toc]</p>
<h2 id="block-elements">Block Elements</h2>
<h3 id="paragraph-and-line-breaks">Paragraph and line breaks</h3>
<p>A paragraph is simply one or more consecutive lines of text. In markdown source code, paragraphs are separated by two or more blank lines. In Typora, you only need one blank line (press <code>Return</code> once) to create a new paragraph.</p>
<p>Press <code>Shift</code> + <code>Return</code> to create a single line break. Most other markdown parsers will ignore single line breaks, so in order to make other markdown parsers recognize your line break, you can leave two spaces at the end of the line, or insert <code>&lt;br/&gt;</code>.</p>
<h3 id="headers">Headers</h3>
<p>Headers use 1-6 hash (<code>#</code>) characters at the start of the line, corresponding to header levels 1-6. For example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"># This is an H1

<span style="color:#75715e">## This is an H2
</span><span style="color:#75715e"></span>
<span style="color:#75715e">###### This is an H6
</span></code></pre></div><p>In Typora, input ‘#’s followed by title content, and press <code>Return</code> key will create a header.</p>
<h3 id="blockquotes">Blockquotes</h3>
<p>Markdown uses email-style &gt; characters for block quoting. They are presented as:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#66d9ef">&gt; </span><span style="font-style:italic">This is a blockquote with two paragraphs. This is first paragraph.
</span><span style="font-style:italic"></span><span style="color:#66d9ef">&gt;
</span><span style="color:#66d9ef"></span><span style="font-style:italic">&gt; This is second pragraph. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
</span><span style="font-style:italic"></span><span style="color:#66d9ef">
</span><span style="color:#66d9ef">
</span><span style="color:#66d9ef">
</span><span style="color:#66d9ef">&gt; </span><span style="font-style:italic">This is another blockquote with one paragraph. There is three empty line to seperate two blockquote.
</span></code></pre></div><p>In Typora, inputting ‘&gt;’ followed by your quote contents will generate a quote block. Typora will insert a proper ‘&gt;’ or line break for you. Nested block quotes (a block quote inside another block quote) by adding additional levels of ‘&gt;’.</p>
<h3 id="lists">Lists</h3>
<p>Input <code>* list item 1</code> will create an unordered list - the <code>*</code> symbol can be replace with <code>+</code> or <code>-</code>.</p>
<p>Input <code>1. list item 1</code> will create an ordered list - their markdown source code is as follows:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#75715e">## un-ordered list
</span><span style="color:#75715e"></span><span style="color:#66d9ef">*</span>   Red
<span style="color:#66d9ef">*</span>   Green
<span style="color:#66d9ef">*</span>   Blue

<span style="color:#75715e">## ordered list
</span><span style="color:#75715e"></span><span style="color:#66d9ef">1.</span>  Red
<span style="color:#66d9ef">2.</span> 	Green
3.	Blue
</code></pre></div><h3 id="task-list">Task List</h3>
<p>Task lists are lists with items marked as either [ ] or [x] (incomplete or complete). For example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#66d9ef">- [ ]</span> a task list item
<span style="color:#66d9ef">- [ ]</span> list syntax required
<span style="color:#66d9ef">- [ ]</span> normal <span style="font-weight:bold">**formatting**</span>, @mentions, #1234 refs
<span style="color:#66d9ef">- [ ]</span> incomplete
<span style="color:#66d9ef">- [x]</span> completed
</code></pre></div><p>You can change the complete/incomplete state by clicking on the checkbox before the item.</p>
<h3 id="fenced-code-blocks">(Fenced) Code Blocks</h3>
<p>Typora only supports fences in GitHub Flavored Markdown. Original code blocks in markdown are not supported.</p>
<p>Using fences is easy: Input ``` and press <code>return</code>. Add an optional language identifier after ``` and we&rsquo;ll run it through syntax highlighting:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">Here&#39;s an example:

​```
function test() {
  console.log(&#34;notice the blank line before this function?&#34;);
}
​```

syntax highlighting:
​```ruby
require &#39;redcarpet&#39;
markdown = Redcarpet.new(&#34;Hello World!&#34;)
puts markdown.to_html
​```
</code></pre></div><h3 id="math-blocks">Math Blocks</h3>
<p>You can render <em>LaTeX</em> mathematical expressions using <strong>MathJax</strong>.</p>
<p>To add a mathematical expression, input <code>$$</code> and press the &lsquo;Return&rsquo; key. This will trigger an input field which accepts <em>Tex/LaTex</em> source. For example:</p>
<p>$$<br />
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}<br />
\mathbf{i} &amp; \mathbf{j} &amp; \mathbf{k} \<br />
\frac{\partial X}{\partial u} &amp;  \frac{\partial Y}{\partial u} &amp; 0 \<br />
\frac{\partial X}{\partial v} &amp;  \frac{\partial Y}{\partial v} &amp; 0 \<br />
\end{vmatrix}<br />
$$</p>
<p>In the markdown source file, the math block is a <em>LaTeX</em> expression wrapped by a pair of ‘$$’ marks:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} &amp; \mathbf{j} &amp; \mathbf{k} \\
\frac{\partial X}{\partial u} &amp;  \frac{\partial Y}{\partial u} &amp; 0 \\
\frac{\partial X}{\partial v} &amp;  \frac{\partial Y}{\partial v} &amp; 0 \\
\end{vmatrix}
$$
</code></pre></div><p>You can find more details <a href="https://support.typora.io/Math/">here</a>.</p>
<h3 id="tables">Tables</h3>
<p>Input <code>| First Header  | Second Header |</code> and press the <code>return</code> key. This will create a table with two columns.</p>
<p>After a table is created, putting focus on that table will open up a toolbar for the table where you can resize, align, or delete the table. You can also use the context menu to copy and add/delete individual columns/rows.</p>
<p>The full syntax for tables is described below, but it is not necessary to know the full syntax in detail as the markdown source code for tables is generated automatically by Typora.</p>
<p>In markdown source code, they look like:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
</code></pre></div><p>You can also include inline Markdown such as links, bold, italics, or strikethrough in the table.</p>
<p>Finally, by including colons (<code>:</code>) within the header row, you can define text in that column to be left-aligned, right-aligned, or center-aligned:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |
</code></pre></div><p>A colon on the left-most side indicates a left-aligned column; a colon on the right-most side indicates a right-aligned column; a colon on both sides indicates a center-aligned column.</p>
<h3 id="footnotes">Footnotes</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">You can create footnotes like this[^footnote].

[^footnote]: Here is the <span style="font-style:italic">*text*</span> of the <span style="font-weight:bold">**footnote**</span>.
</code></pre></div><p>will produce:</p>
<p>You can create footnotes like this<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p>
<p>Hover over the ‘footnote’ superscript to see content of the footnote.</p>
<h3 id="horizontal-rules">Horizontal Rules</h3>
<p>Inputting <code>***</code> or <code>---</code> on a blank line and pressing <code>return</code> will draw a horizontal line.</p>
<hr />
<h3 id="yaml-front-matter">YAML Front Matter</h3>
<p>Typora now supports <a href="http://jekyllrb.com/docs/frontmatter/">YAML Front Matter</a>. Input <code>---</code> at the top of the article and then press <code>Return</code> to introduce a metadata block. Alternatively, you can insert a metadata block from the top menu of Typora.</p>
<h3 id="table-of-contents-toc">Table of Contents (TOC)</h3>
<p>Input <code>[toc]</code> and press the <code>Return</code> key. This will create a  “Table of Contents” section. The TOC extracts all headers from the document, and its contents are updated automatically as you add to the document.</p>
<h2 id="span-elements">Span Elements</h2>
<p>Span elements will be parsed and rendered right after typing. Moving the cursor in middle of those span elements will expand those elements into markdown source. Below is an explanation of the syntax for each span element.</p>
<h3 id="links">Links</h3>
<p>Markdown supports two styles of links: inline and reference.</p>
<p>In both styles, the link text is delimited by [square brackets].</p>
<p>To create an inline link, use a set of regular parentheses immediately after the link text’s closing square bracket. Inside the parentheses, put the URL where you want the link to point, along with an optional title for the link, surrounded in quotes. For example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">This is [<span style="color:#f92672">an example</span>](<span style="color:#a6e22e">http://example.com/ &#34;Title&#34;</span>) inline link.

[<span style="color:#f92672">This link</span>](<span style="color:#a6e22e">http://example.net/</span>) has no title attribute.
</code></pre></div><p>will produce:</p>
<p>This is <a href="http://example.com/" title="Title">an example</a> inline link. (<code>&lt;p&gt;This is &lt;a href=&quot;http://example.com/&quot; title=&quot;Title&quot;&gt;</code>)</p>
<p><a href="http://example.net/">This link</a> has no title attribute. (<code>&lt;p&gt;&lt;a href=&quot;http://example.net/&quot;&gt;This link&lt;/a&gt; has no</code>)</p>
<h4 id="internal-links">Internal Links</h4>
<p><strong>You can set the href to headers</strong>, which will create a bookmark that allow you to jump to that section after clicking. For example:</p>
<p>Command(on Windows: Ctrl) + Click <a href="#block-elements">This link</a> will jump to header <code>Block Elements</code>. To see how to write that, please move cursor or click that link with <code>⌘</code> key pressed to expand the element into markdown source.</p>
<h4 id="reference-links">Reference Links</h4>
<p>Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">This is [an example][id] reference-style link.

Then, anywhere in the document, you define your link label on a line by itself like this:

[id]: http://example.com/  &#34;Optional Title Here&#34;
</code></pre></div><p>In Typora, they will be rendered like so:</p>
<p>This is <a href="http://example.com/" title="Optional Title Here">an example</a> reference-style link.</p>
<p>The implicit link name shortcut allows you to omit the name of the link, in which case the link text itself is used as the name. Just use an empty set of square brackets — for example, to link the word “Google” to the google.com web site, you could simply write:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">[Google][]
And then define the link:

[Google]: http://google.com/
</code></pre></div><p>In Typora, clicking the link will expand it for editing, and command+click will open the hyperlink in your web browser.</p>
<h3 id="urls">URLs</h3>
<p>Typora allows you to insert URLs as links, wrapped by <code>&lt;</code>brackets<code>&gt;</code>.</p>
<p><code>&lt;i@typora.io&gt;</code> becomes <a href="mailto:i@typora.io">i@typora.io</a>.</p>
<p>Typora will also automatically link standard URLs. e.g: <a href="http://www.google.com">www.google.com</a>.</p>
<h3 id="images">Images</h3>
<p>Images have similar syntax as links, but they require an additional <code>!</code> char before the start of the link. The syntax for inserting an image looks like this:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">![<span style="color:#f92672">Alt text</span>](<span style="color:#a6e22e">/path/to/img.jpg</span>)

![<span style="color:#f92672">Alt text</span>](<span style="color:#a6e22e">/path/to/img.jpg &#34;Optional title&#34;</span>)
</code></pre></div><p>You are able to use drag &amp; drop to insert an image from an image file or your web browser. You can modify the markdown source code by clicking on the image. A relative path will be used if the image that is added using drag &amp; drop is in same directory or sub-directory as the document you&rsquo;re currently editing.</p>
<p>If you’re using markdown for building websites, you may specify a URL prefix for the image preview on your local computer with property <code>typora-root-url</code> in YAML Front Matters. For example, input <code>typora-root-url:/User/Abner/Website/typora.io/</code> in YAML Front Matters, and then <code>![alt](/blog/img/test.png)</code> will be treated as <code>![alt](file:///User/Abner/Website/typora.io/blog/img/test.png)</code> in Typora.</p>
<p>You can find more details <a href="https://support.typora.io/Images/">here</a>.</p>
<h3 id="emphasis">Emphasis</h3>
<p>Markdown treats asterisks (<code>*</code>) and underscores (<code>_</code>) as indicators of emphasis. Text wrapped with one <code>*</code> or <code>_</code> will be wrapped with an HTML <code>&lt;em&gt;</code> tag. E.g:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">*single asterisks*

<span style="font-style:italic">_single underscores_</span>
</code></pre></div><p>output:</p>
<p><em>single asterisks</em></p>
<p><em>single underscores</em></p>
<p>GFM will ignore underscores in words, which is commonly used in code and names, like this:</p>
<blockquote>
<p>wow_great_stuff</p>
<p>do_this_and_do_that_and_another_thing.</p>
</blockquote>
<p>To produce a literal asterisk or underscore at a position where it would otherwise be used as an emphasis delimiter, you can backslash escape it:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">\*this text is surrounded by literal asterisks\*
</code></pre></div><p>Typora recommends using the <code>*</code> symbol.</p>
<h3 id="strong">Strong</h3>
<p>A double <code>*</code> or <code>_</code> will cause its enclosed contents to be wrapped with an HTML <code>&lt;strong&gt;</code> tag, e.g:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">**double asterisks**

<span style="font-weight:bold">__double underscores__</span>
</code></pre></div><p>output:</p>
<p><strong>double asterisks</strong></p>
<p><strong>double underscores</strong></p>
<p>Typora recommends using the <code>**</code> symbol.</p>
<h3 id="code">Code</h3>
<p>To indicate an inline span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">Use the <span style="color:#e6db74">`printf()`</span> function.
</code></pre></div><p>will produce:</p>
<p>Use the <code>printf()</code> function.</p>
<h3 id="strikethrough">Strikethrough</h3>
<p>GFM adds syntax to create strikethrough text, which is missing from standard Markdown.</p>
<p><code>~~Mistaken text.~~</code> becomes <del>Mistaken text.</del></p>
<h3 id="underlines">Underlines</h3>
<p>Underline is powered by raw HTML.</p>
<p><code>&lt;u&gt;Underline&lt;/u&gt;</code> becomes <u>Underline</u>.</p>
<h3 id="emoji-smile">Emoji :smile:</h3>
<p>Input emoji with syntax <code>:smile:</code>.</p>
<p>User can trigger auto-complete suggestions for emoji by pressing <code>ESC</code> key, or trigger it automatically after enabling it on preference panel. Also, inputting UTF-8 emoji characters directly is also supported by going to <code>Edit</code> -&gt; <code>Emoji &amp; Symbols</code> in the menu bar (macOS).</p>
<h3 id="inline-math">Inline Math</h3>
<p>To use this feature, please enable it first in the <code>Preference</code> Panel -&gt; <code>Markdown</code> Tab. Then, use <code>$</code> to wrap a TeX command. For example: <code>$\lim_{x \to \infty} \exp(-x) = 0$</code> will be rendered as LaTeX command.</p>
<p>To trigger inline preview for inline math: input “$”, then press the <code>ESC</code> key, then input a TeX command.</p>
<p>You can find more details <a href="https://support.typora.io/Math/">here</a>.</p>
<h3 id="subscript">Subscript</h3>
<p>To use this feature, please enable it first in the <code>Preference</code> Panel -&gt; <code>Markdown</code> Tab. Then, use <code>~</code> to wrap subscript content. For example: <code>H~2~O</code>, <code>X~long\ text~</code>/</p>
<h3 id="superscript">Superscript</h3>
<p>To use this feature, please enable it first in the <code>Preference</code> Panel -&gt; <code>Markdown</code> Tab. Then, use <code>^</code> to wrap superscript content. For example: <code>X^2^</code>.</p>
<h3 id="highlight">Highlight</h3>
<p>To use this feature, please enable it first in the <code>Preference</code> Panel -&gt; <code>Markdown</code> Tab. Then, use <code>==</code> to wrap highlight content. For example: <code>==highlight==</code>.</p>
<h2 id="html">HTML</h2>
<p>You can use HTML to style content what pure Markdown does not support. For example, use <code>&lt;span style=&quot;color:red&quot;&gt;this text is red&lt;/span&gt;</code> to add text with red color.</p>
<h3 id="embed-contents">Embed Contents</h3>
<p>Some websites provide iframe-based embed code which you can also paste into Typora. For example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-Markdown" data-lang="Markdown">&lt;iframe height=&#39;265&#39; scrolling=&#39;no&#39; title=&#39;Fancy Animated SVG Menu&#39; src=&#39;http://codepen.io/jeangontijo/embed/OxVywj/?height=265&amp;theme-id=0&amp;default-tab=css,result&amp;embed-version=2&#39; frameborder=&#39;no&#39; allowtransparency=&#39;true&#39; allowfullscreen=&#39;true&#39; style=&#39;width: 100%;&#39;&gt;&lt;/iframe&gt;
</code></pre></div><h3 id="video">Video</h3>
<p>You can use the <code>&lt;video&gt;</code> HTML tag to embed videos. For example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-Markdown" data-lang="Markdown">&lt;video src=&#34;xxx.mp4&#34; /&gt;
</code></pre></div><h3 id="other-html-support">Other HTML Support</h3>
<p>You can find more details <a href="https://support.typora.io/HTML/">here</a>.</p>
<div class="footnotes" role="doc-endnotes">
<hr />
<ol>
<li id="fn:1" role="doc-endnote">
<p>Here is the <em>text</em> of the <strong>footnote</strong>. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>

  </div>
  <footer>
    <ul class="stats">
  
    
    
      <li class="categories">
        <ul>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/en/categories/syntax">syntax</a></li>
          
        </ul>
      </li>
    
  
  
    
    
      <li class="tags">
        <ul>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/en/tags/markdown">markdown</a></li>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/en/tags/typora">typora</a></li>
          
        </ul>
      </li>
    
  
</ul>

  </footer>
</article>

    <article class="post">
      
<div>
  <h2>Say something</h2>
    <form id="post-js-form" class="post-new-comment" method="POST">
      
      <h5 class='post-reply-notice hidden'>
        <span class='post-reply-arrow'></span><span class='post-reply-name'></span>
      </h5>

      
      <input type="hidden" name="options[entryId]" value="56b69effef38d08310d7b207e8b314fb">
      <input type='hidden' name='fields[replyThread]' value=''>
      <input type='hidden' name='fields[replyID]' value=''>
      <input type='hidden' name='fields[replyName]' value=''>

      
      <input required name='fields[name]' type='text' placeholder='Your name (Required)'>
      <input name='fields[website]' type='text' placeholder='Your website'>
      <input required name='fields[email]' type='email' placeholder='Your email address (Required for Gravatar)'>
      <textarea required name='fields[body]' placeholder='Your message. Feel free to use Markdown (Google &#39;Markdown Cheat Sheet&#39;).' rows='10'></textarea>

      
      

      
      <p class='post-submit-notice'>
        <strong class='post-submit-notice-text submit-success hidden'>Thanks for your comment! It will be shown on the site once it has been approved.</strong>
        <strong class='post-submit-notice-text submit-failed hidden'>Sorry, there was an error with your submission.  Please make sure all required fields have been completed and try again.</strong>
      </p>

      
      <input type='submit' value='Submit' class='button'>
      <input type='submit' value='Submitted' class='hidden button' disabled>
      <input type='reset' value='Reset' class='button'>
    </form>
</div>


<div>
  <h2>Comments</h2>

  
    
      <p>Nothing yet.</p>
    
  
</div>

    </article>


<div class="pagination">
  
    <a href="/en/blog/markdown-syntax/" class="button"><div class="previous"><div>Markdown语法指南</div></div></a>
  
  
    <a href="/en/blog/migrate-from-jekyll/" class="button"><div class="next"><div>Migrate to Hugo from Jekyll</div></div></a>
  
</div>


      </main>
      <div class="post-toc">
     
    <aside>
        <header>
        <h4>Markdown For Typora的字数: 1958</h4> 
        </header><nav id="TableOfContents">
  <ul>
    <li><a href="#markdown-for-typora">Markdown For Typora</a>
      <ul>
        <li><a href="#overview">Overview</a></li>
        <li><a href="#block-elements">Block Elements</a>
          <ul>
            <li><a href="#paragraph-and-line-breaks">Paragraph and line breaks</a></li>
            <li><a href="#headers">Headers</a></li>
            <li><a href="#blockquotes">Blockquotes</a></li>
            <li><a href="#lists">Lists</a></li>
            <li><a href="#task-list">Task List</a></li>
            <li><a href="#fenced-code-blocks">(Fenced) Code Blocks</a></li>
            <li><a href="#math-blocks">Math Blocks</a></li>
            <li><a href="#tables">Tables</a></li>
            <li><a href="#footnotes">Footnotes</a></li>
            <li><a href="#horizontal-rules">Horizontal Rules</a></li>
            <li><a href="#yaml-front-matter">YAML Front Matter</a></li>
            <li><a href="#table-of-contents-toc">Table of Contents (TOC)</a></li>
          </ul>
        </li>
        <li><a href="#span-elements">Span Elements</a>
          <ul>
            <li><a href="#links">Links</a>
              <ul>
                <li><a href="#internal-links">Internal Links</a></li>
                <li><a href="#reference-links">Reference Links</a></li>
              </ul>
            </li>
            <li><a href="#urls">URLs</a></li>
            <li><a href="#images">Images</a></li>
            <li><a href="#emphasis">Emphasis</a></li>
            <li><a href="#strong">Strong</a></li>
            <li><a href="#code">Code</a></li>
            <li><a href="#strikethrough">Strikethrough</a></li>
            <li><a href="#underlines">Underlines</a></li>
            <li><a href="#emoji-smile">Emoji :smile:</a></li>
            <li><a href="#inline-math">Inline Math</a></li>
            <li><a href="#subscript">Subscript</a></li>
            <li><a href="#superscript">Superscript</a></li>
            <li><a href="#highlight">Highlight</a></li>
          </ul>
        </li>
        <li><a href="#html">HTML</a>
          <ul>
            <li><a href="#embed-contents">Embed Contents</a></li>
            <li><a href="#video">Video</a></li>
            <li><a href="#other-html-support">Other HTML Support</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav></aside>
    <a href="#" id="toc-toggle"></a>
     
</div>
      <section id="site-sidebar">
  
    <section id="recent-posts">
      <header>
        <h1>Recent posts</h1>
      </header>
      
      <article class="mini-post">
        <section>
          
  <a href="/en/blog/markdown-reference-/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/en/blog/markdown-reference-/">Markdown For Typora</a></h1>
          <time class="published" datetime="">March 12, 2020</time>
        </header>
      </article>
      
      <article class="mini-post">
        <section>
          
  <a href="/en/blog/markdown-syntax/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/en/blog/markdown-syntax/">Markdown语法指南</a></h1>
          <time class="published" datetime="">March 11, 2020</time>
        </header>
      </article>
      
      <article class="mini-post">
        <section>
          
  <a href="/en/blog/placeholder-text/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/en/blog/placeholder-text/">Placeholder Text</a></h1>
          <time class="published" datetime="">March 9, 2019</time>
        </header>
      </article>
      
      
        <a href="/en/blog/" class="button">See more</a>
      
    </section>
  

  
    
      <section id="categories">
        <header>
          <h1><a href="/en/categories">Categories</a></h1>
        </header>
        <ul>
          
            
          
          
          <li>
            
              <a href="/en/categories/syntax/">syntax<span class="count">2</span></a>
            
          
          <li>
            
              <a href="/en/categories/themes/">themes<span class="count">1</span></a>
            
          
          </li>
        </ul>
      </section>
    
  

  
    <section id="mini-bio">
      <header>
        <h1>About</h1>
      </header>
      <p>test</p>
      <footer>
        <a href="/en/about" class="button">Learn More</a>
      </footer>
    </section>
  
</section>

      <footer id="site-footer">
  
      <ul class="socnet-icons">
        

        <li><a href="//github.com/hhs44/hhs44.github.io" target="_blank" rel="noopener" title="GitHub" class="fab fa-github"></a></li>






<li><a href="//flickr.com/photos/example" target="_blank" rel="noopener" title="Flickr" class="fab fa-flickr"></a></li>




<li><a href="//linkedin.com/in/example" target="_blank" rel="noopener" title="LinkedIn" class="fab fa-linkedin"></a></li>
<li><a href="//linkedin.com/company/examplebusiness" target="_blank" rel="noopener" title="LinkedIn Company" class="fab fa-linkedin"></a></li>



<li><a href="//facebook.com/example" target="_blank" rel="noopener" title="Facebook" class="fab fa-facebook"></a></li>
<li><a href="//reddit.com/user/example" target="_blank" rel="noopener" title="Reddit" class="fab fa-reddit"></a></li>





<li><a href="weixin://contacts/profile/22" target="_blank" rel="noopener" title="WeChat" class="fab fa-weixin"></a></li>
<li><a href="//wpa.qq.com/msgrd?v=3&amp;uin=1159986871&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener" title="QQ" class="fab fa-qq"></a></li>
<li><a href="//instagram.com/example" target="_blank" rel="noopener" title="Instagram" class="fab fa-instagram"></a></li>

<li><a href="//twitter.com/example" target="_blank" rel="noopener" title="Twitter" class="fab fa-twitter"></a></li>


<li><a href="//pinterest.com/example" target="_blank" rel="noopener" title="Pinterest" class="fab fa-pinterest-p"></a></li>
<li><a href="//telegram.me/example" target="_blank" rel="noopener" title="telegram" class="fab fa-telegram"></a></li>



<li><a href="//researchgate.net/profile/example" target="_blank" rel="noopener" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>
<li><a href="//keybase.io/example" target="_blank" rel="noopener" title="keybase" class="fab fa-keybase"></a></li>
<li><a href="//example.com/@example" target="_blank" rel="noopener" title="mastodon" class="fab fa-mastodon"></a></li>
<li><a href="mailto:1159986871@qq.com" target="_blank" title="Email" class="far fa-envelope"></a></li>

      </ul>
  
  <p class="copyright">
    
      &copy; 2020
      
        Huanghs blog
      
    . <br>
    Theme: <a href='https://github.com/pacollins/hugo-future-imperfect-slim' target='_blank' rel='noopener'>Hugo Future Imperfect Slim</a><br>A <a href='https://html5up.net/future-imperfect' target='_blank' rel='noopener'>HTML5 UP port</a> | Powered by <a href='https://gohugo.io/' title='0.66.0' target='_blank' rel='noopener'>Hugo</a>
  </p>
</footer>
<a id="back-to-top" href="#" class="fas fa-arrow-up fa-2x"></a>

      <script src="/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script><script src="/js/bundle.min.b17fef5a58c033a8a59f57c83aa975a251aecff921cbd36c12e975d530fa023b.js" integrity="sha256-sX/vWljAM6iln1fIOql1olGuz/khy9NsEul11TD6Ajs="></script>
    <script src="/js/add-on.js"></script>
    </div>
  </body>
</html>
